import { ref, onMounted, onBeforeUnmount } from 'vue'

const useWebSocket = (url, reconnectInterval = 3000, maxReconnectAttempts = 20, heartbeatInterval = 5000) => {
  // 创建一个响应式引用来存储 WebSocket 实例
  const socket = ref(null)
  // 标记组件是否已挂载
  const isMounted = ref(true)
  // 标记 WebSocket 是否已连接
  const isConnected = ref(false)
  // 记录重连尝试次数
  let reconnectAttempts = 0
  let messages = ref()
  let heartbeatTimer = null
  let lastHeartbeatResponse = Date.now()

  // 连接 WebSocket 的函数
  const connect = () => {
    // 如果已存在 WebSocket 实例，则先关闭它
    if (socket.value) {
      socket.value.close()
    }

    // 创建新的 WebSocket 实例
    socket.value = new WebSocket(url)

    // 监听 WebSocket 打开事件
    socket.value.addEventListener('open', () => {
      console.log('WebSocket连接已打开')
      isConnected.value = true // 更新连接状态
      reconnectAttempts = 0 // 重置重连尝试次数
      startHeartbeat() // 连接成功后开始心跳
    })

    // 监听 WebSocket 消息事件
    socket.value.addEventListener('message', (event) => {
      // 处理心跳响应
      if (event.data === 'ping') {
        lastHeartbeatResponse = Date.now()
        return
      }
      messages.value = JSON.parse(event.data)
    })

    // 监听 WebSocket 关闭事件
    socket.value.addEventListener('close', () => {
      console.log('WebSocket连接已关闭')
      isConnected.value = false // 更新连接状态
      stopHeartbeat() // 停止心跳
      // 如果组件仍挂载且未达到最大重连尝试次数，则尝试重新连接
      if (isMounted.value && reconnectAttempts < maxReconnectAttempts) {
        // 使用递增的延迟来避免频繁重连
        setTimeout(connect, reconnectInterval * (reconnectAttempts + 1))
        reconnectAttempts++ // 增加重连尝试次数
      }
    })

    // 监听 WebSocket 错误事件
    socket.value.addEventListener('error', (error) => {
      console.error('WebSocket发生错误:', error)
      isConnected.value = false // 更新连接状态
      stopHeartbeat() // 停止心跳
      // 如果组件仍挂载且未达到最大重连尝试次数，则尝试重新连接
      if (isMounted.value && reconnectAttempts < maxReconnectAttempts) {
        // 使用递增的延迟来避免频繁重连
        setTimeout(connect, reconnectInterval * (reconnectAttempts + 1))
        reconnectAttempts++ // 增加重连尝试次数
      }
    })
  }

  // 发送心跳消息
  const sendHeartbeat = () => {
    if (socket.value && socket.value.readyState === WebSocket.OPEN) {
      socket.value.send('ping')
      // 检查是否长时间未收到心跳响应
      if (Date.now() - lastHeartbeatResponse > heartbeatInterval * 2) {
        console.log('心跳超时，尝试重新连接')
        socket.value.close()
      }
    }
  }

  // 启动心跳机制
  const startHeartbeat = () => {
    heartbeatTimer = setInterval(sendHeartbeat, heartbeatInterval)
  }

  // 停止心跳机制
  const stopHeartbeat = () => {
    clearInterval(heartbeatTimer)
  }

  // 发送消息到 WebSocket
  const sendMessage = (message) => {
    if (socket.value && socket.value.readyState === WebSocket.OPEN) {
      socket.value.send(message)
    }
  }

  // 组件挂载时执行
  onMounted(() => {
    isMounted.value = true
    connect() // 尝试建立连接
  })

  // 组件卸载前执行
  onBeforeUnmount(() => {
    isMounted.value = false
    stopHeartbeat() // 停止心跳
    if (socket.value) {
      socket.value.close() // 关闭 WebSocket 连接
    }
  })

  // 返回对象，包含 WebSocket 实例、连接状态和发送消息的函数
  return {
    socket,
    isConnected,
    messages,
    sendMessage
  }
}

export default useWebSocket
